// Card.js
import { useEffect } from "react";
import "./CardStyles.css";
import { connect } from "umi";
import cardBackground from "@/assets/p1/card_background.png";

const Card = ({ visible, children, cardId, dispatch, onClick }) => {
	const cardStyle = {
		backgroundImage: `url(${cardBackground})`,
		width: "800px",
		height: "1000px",
		fontSize: "70px",
		display: visible ? "flex" : "none",
		lineHeight: "10px",
		color: "black",

		// 其他的样式通过 CSS 类来定义
	};

	useEffect(() => {
		if (visible) {
			dispatch({
				type: "achievement/completeAchievement",
				payload: cardId,
			});
		}
	}, [visible]);

	return (
		<div
			className="card"
			style={cardStyle}
			onClick={onClick ? onClick : () => {}}
		>
			{children}
		</div>
	);
};

export default connect(() => ({}))(Card);
